<template>
  <div class="bg-box">
    <Nav></Nav>
    <div class="main-box">
      <!-- TODO:这个是上半部分要添加的内容 -->
      <div class="top-box">
        <!-- 左边头像 -->
        <div class="left-contrainer">
          <img src="@/assets/_img.png" alt="" style="
              width: 260px;
              height: 180px;
              top: 35px;
              left: 30px;
              border-radius: 10px;
            " />
        </div>
        <!-- 右边 -->
        <div class="right-contrainer">
          <div class="title">
            <div style="font-weight: 500px; font-size: 22px">
              这个是竞赛的标题
            </div>
            <div style="margin-top: 25px; font-size: 14px">2022年11月7日</div>
            <div style="
              display: flex;
                width: 600px;
                margin-top: 25px;
                font-weight: 500px;
                font-size: 18px;
                justify-content: space-between;
              ">
              <span style="display: inline; margin-left: 0">
                报名队伍/我的排名：1145/14</span>
              <span class="join" @click="apply" v-if="!isApply">报名参赛</span>
              <span class="join" @click="to('/uploadFile')" v-else>提交代码</span>
            </div>
            <div style="font-size: 16px">
              类别：
              <span>
                <el-tag style="margin-left: 0">Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
                <el-tag class="ml-2" type="warning">Tag 4</el-tag>
                <el-tag class="ml-2" type="danger">Tag 5</el-tag>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-box">
      <!-- TODO:这个是下半部分要添加的内容 -->
      <div class="bottom-box">
        <el-menu default-active="/raceDetail" mode="horizontal" @select="handleSelect" router="true">
          <el-menu-item index="/raceDetail">比赛介绍</el-menu-item>
          <el-menu-item index="/raceDetail/rank">比赛排名</el-menu-item>
        </el-menu>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import Nav from "@/components/Nav.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const to = (url) => {
  router.push(url);
};
const isApply = ref(false)
const apply=()=>{
  ElMessage({
      message: "报名参赛成功",
      type: "success",
    });
    isApply.value=true;
}

const handleSelect = (index) => {
  activeIndex.value = index;
};
</script>

<style scoped>
.bg-box {
  background-color: #eee;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-box {
  margin-top: 20px;
  width: 1200px;
  background-color: #fff;
}

.top-box {
  display: flex;
  width: 1200px;
  height: 255px;
  top: 91px;
  left: 120px;
  background-color: #ffffff;
}

.left-contrainer {
  width: 260px;
  height: 255px;
  margin-top: 35px;
  margin-left: 31px;
  margin-bottom: 40px;
}

._img {
  width: 260px;
  height: 180px;
  top: 35px;
  left: 30px;
  border-radius: 10px;
}

.right-contrainer {
  height: 255px;
  margin-top: 35px;
  margin-left: 40px;
}

.title {}

span {
  margin-left: 13px;
}

.join {
  width: 130px;
  background-color: #2979ff;
  height: 50px;
  line-height: 50px;
  justify-content: space-between;
  align-items: center;
  color: white;
  cursor: pointer;
  user-select: none;
  text-align: center;
}

.bottom-box {
  width: 1200px;
  top: 371px;
  left: 120px;
  min-height: 365px;
}
</style>